<!--
 * @Author: your name
 * @Date: 2021-01-06 18:07:56
 * @LastEditTime: 2021-01-07 10:40:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\test\frame\historyChart.vue
-->
<template>
    <div class="frame-historyChart-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <a href="javascript:;" @click='tractTime'><i class="el-icon-arrow-left"></i></a>
                <el-date-picker
                v-model="time"
                type="date"
                :placeholder="$t('selectDate')"
                value-format='yyyy-MM-dd'
                @change='changeDateTime'
                :clearable='false'
                :picker-options="pickerOptions"
                >
                </el-date-picker>
                <a href="javascript:;" @click='addTime' ><i class="el-icon-arrow-right"></i></a>
            </div>
            <div style="line-height: 32px;margin-top: -10px;margin-left:15px;">
                <span style="">{{$t('inverterState.chart.states')}}:</span>
                <el-select v-model="selectDatas" :multiple-limit='5' :style="returnWidth" multiple :placeholder="$t('please_choose')" @change='cs'>
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.code"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="echarts-box">
            <div class='echarts' id='echarts' v-loading="loading"  v-if='selectDatas.length>0'>
            </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            time:moment().format("YYYY-MM-DD"),
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            selectDatas:[],
            options:[],
            selectWidthDom:'',
            chartData:[],
            loading:false,
        };
    },
    computed: {
        returnWidth(){
            return `width:${(this.selectWidthDom || 114) + 100}px;`
        },
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        this.deviceTestGetStateChart()
    },
    methods: {
        initEcharts(){
            let option= {
                tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                grid: {
                    left:'10%',
                    right:'15%',
                    bottom:'15%'
                    },
                legend: {
                        itemWidth: 20,
                        itemHeight: 15
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                xAxis : [
                    {
                        type : 'category',
                        data: this.chartData.map(item=>{
                           return  moment(item.uploadTimeValue).format("HH:mm:ss")
                        }),
                    }
                ],
                yAxis: [
                    {   
                        type : 'value',
                        axisLine : { show : false },
                        splitLine : { 
                            show : true, 
                            lineStyle : { color : [ '#B0ADAD' ] } 
                        },// x轴网格线不显示
                        axisLabel : { 
                            textStyle : { color : '#68676C' }
                        }
                    }
                ],
                // series:[
                //     {
                //         name:'gridpower',
                //         type:'line',
                //         symbolSize: 0,
                //         smooth: true,
                //         data:this.chartData.map(item=>{
                //            return  item.gridpower
                //         }),
                //     }
                // ]
            }
            let seriesArray = []
            this.selectDatas.forEach(item=>{
                let obj = {
                        name:this.comm.returnCode(this.options,item,'value','code')+"("+this.comm.returnCode(this.options,item,'value','remark')+")",
                        type:'line',
                        symbolSize: 0,
                        smooth: true,
                        data:this.chartData.map(items=>{
                           return  items[item]
                        }),
                }
                seriesArray.push(obj)
            })
            option.series = seriesArray
            this.$nextTick(()=>{
                let myChart = this.echarts.init(document.getElementById("echarts"));
                myChart.setOption(option,true); //注意，第二个参数为重置数据而不是合并数据，避免去掉数据的时候，无法删除的情况
            })
        },
        async deviceTestGetStateChart(){
            this.loading = true
            let res= await this.API.deviceTestGetStateChart({
                wifiSN:this.$route.query.wifiSN,
                time:this.time,
            })
            this.chartData = res
            this.loading = false
            if(this.selectDatas.length>0){
                this.initEcharts()
            }
        },
        cs(){
            //暂时用来监听多选框的宽度
            this.$nextTick(()=>{
                let select  = document.querySelector('.el-select__tags span')
                this.selectWidthDom = select.offsetWidth
            })
            if(this.selectDatas.length == 0){
                this.comm.showMsg(false,'请选择参数')
                return
            }
            this.initEcharts()
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:`INVERTER_STATE_ARGS`,
                lang:localStorage.getItem('lang') || 'zh_CN'
            })
            this.options = res.INVERTER_STATE_ARGS
            // this.deviceTestGetStateChart()
        },
        returnNowTime(){
            return moment().format("YYYY-MM-DD")
        },
        changeDateTime(){
            if(this.selectDatas.length == 0){
                this.comm.showMsg(false,'请选择参数')
                return
            }
            this.deviceTestGetStateChart()
        },
        tractTime(){
            if(this.selectDatas.length == 0){
                this.comm.showMsg(false,'请选择参数')
                return
            }
            this.time = moment(this.time).subtract(1, 'days').format('YYYY-MM-DD')
            this.deviceTestGetStateChart()
        },
        addTime(){
            if(this.selectDatas.length == 0){
                this.comm.showMsg(false,'请选择参数')
                return
            }
            if(this.time == this.returnNowTime()? true:false){
                return
            }
            this.time = moment(this.time).add(1, 'days').format('YYYY-MM-DD')
            this.deviceTestGetStateChart()
        }
    },
};
</script>

<style  lang="less">
.frame-historyChart-main-box{
    .el-select__tags {
        white-space: nowrap;
        overflow: hidden;
    }
    .el-select__tags>span {
        display: block;
    }
    .echarts{
        height: 400px;
    }
    .echarts-box{
        width: 100%;
        height: 420px;
        background-color: #f6f6f6;
    }
}
</style>
